<template>
	<view>
		<rf-topSearch headNavigationType="1" @fan="fan"></rf-topSearch>
		<view class="top">
			<image src="../../static/fy.png" mode="widthFix"></image>
		</view>
		<!-- <view class="in">
			<view class="List">
				<view class="content">
					<view class="text">
						玉石
					</view>
					<view class="imgg">
						<image src="../../static/fy11.png" mode=""></image>
					</view>
				</view>
				
				
			</view>
		</view> -->
	
		<view class="con">
			<image src="../../static/fy111.png" mode="widthFix"></image>
		</view>
		<view class="" v-if="shopData.length !=0 ">
			<view class="foot"  @click="toDetail(items.id)" :style="{'margin-left': index%3==0?'3%':'1%'}" v-for="(items,index) in shopData" :key="index" >
				<view class="left">
					<image :src="items.picture" mode=""></image>
				</view>
				<view class="right">
					<view class="cont">
						{{items.name}}
					</view>
					<view class="grab">
						已购{{items.sales}}件
					</view>
					<view class="price">
						￥{{items.price}}
					</view>
					<view class="original">
						￥ {{items.market_price}}
					</view>
					<view class="tu1" @click="toDetail(items.id)">
						抢购
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topSearch from "@/components/rf-topSearch/rf-topSearch.vue"
	import { culturalIndex } from "@/api/product";
	export default {
		components: {
			"topp":topSearch
		},
		data() {
			return {
				shopData:[]
			};
		},
		onLoad() {
			this.init();
		},
		methods:{
			fan(){
				uni.navigateBack()
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			init(){
				this.$get(`${culturalIndex}`, {page_size:1000,page:0}).then(r => {
					console.log(r)
					this.shopData = r.data;
					
				}).catch((err) => {
					console.log(err)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fan {
		position: absolute;
		z-index: 10;
		width: 24upx;
		height: 42upx;
		top: 30upx;
		left: 30upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.in {
		overflow: hidden;
		.List {
			width: 100%;
			height: 160upx;
			// background-color: #007AFF;
			padding-top:20upx ;
			// line-height: 140upx;
			 // display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			justify-content: space-between;
			.content {
				position: relative;
				width: 116upx;
				height: 116upx;
				// overflow:auto;
				background:rgba(192,2,2,1);
				margin-left: 25upx;
				display:inline-block;
				 white-space: nowrap;
				 border-radius: 50%;
				 .text {
					 position: absolute;
					 color: #FFFFFF;
					 top: 18upx;
					 left: 28upx;
					 font-family:PingFangSC-Medium,PingFang SC;
					 font-weight:500;
				 }
				 image {
					 position: absolute;
					 width: 58upx;
					 height: 28upx;
					 bottom: 20upx;
					 left: 24upx;
				 }
			}
		}
	}
	.top {
		width: 100%;
		height: 300upx;
		// background-color: #000000;
		// margin-bottom: 20upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.con {
		width: 100%;
		height: 252upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.foot {
		width: 95%;
		margin-bottom: 10px;
		height: 286upx;
		// padding-left: 20upx;
		// padding-right: 20upx;
		margin-left: 20upx;
		margin-right: 20upx;
		background-color: #fff;
		background-image: url(../../static/fy1.png);
		background-size: 100%;
		image{
			border-radius: 5px 0 0 5px;
		}
		.left {
			width: 220upx;
			height: 220upx;
			margin: 30upx;
			display: inline-block;
			// background-color: #FF0000;
			float: left;	
			image {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
		}
		.right {
			position: relative;
			float: left;
			width: 420upx;
			height: 260upx;
			.cont {
				word-break: break-all; 
				word-wrap: break-word;
				margin-top: 30upx;
				// margin-left: 20upx;
				padding-left: 20upx;
				padding-right: 10upx;
				font-size:14px;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				overflow: hidden; 
				white-space: nowrap; 
				text-overflow: ellipsis;
				}
			.grab {
				display: inline-block;
				margin-top: 10upx;
				background:rgba(205,29,44,0.4);
				color: #CD1D2C;
				font-size: 12px;
				border-radius: 2px;
				padding-left: 8upx;
				padding-right: 8upx;
				margin-left: 20upx;
				margin-top: 30upx;
				height: 36upx;
				line-height: 40upx;
				
				
			}
			.original {
				color: #999999;
				font-size: 12px;
				display: inline-block;
				font-family:PingFangSC-Medium,PingFang SC;
				position: absolute;
				bottom: 10upx;
				left: 20upx;
				text-decoration: line-through;
			}
			.price {
	
				color: #FF383B;
				font-size: 14px;
				display: inline-block;
				font-family:PingFangSC-Medium,PingFang SC;
				position: absolute;
				bottom: 50upx;
				left: 20upx;
			}
			.tu1 {
				position: absolute;
				text-align: center;
				line-height: 55upx;
				color: rgba(205,29,44,1);
				font-size: 13px;
				// float: right;
				width: 120upx;
				height: 60upx;
				right: 30upx;
				bottom: 0;
				background: url(../../static/fy2.png) no-repeat;
				background-size: 100%;
				// margin-top: 60upx;
				// margin-right: 30upx;
			}
			
		}
	
	}
</style>
